<template>
  <div class="home">
    <transition-group
      :enter-active-class="state.animate.in"
      :leave-active-class="state.animate.out"
    >
      <div
        v-for="(item, $index) in state.boxList"
        class="box"
        :key="$index"
        :class="item.class"
        :style="`z-index: ${item.zIndex};background: ${item.color};background-image: url(${state.img});background-repeat: repeat;`"
        v-show="state.showBox === $index"
      >
        <component :is="item.comp"></component>
      </div>
    </transition-group>

    <ul class="nav">
      <li
        v-for="(item, $index) in state.boxList"
        :key="$index"
        :class="{ 'li-active': state.showBox == $index }"
        @click="choice($index)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue'
import { mouseWheelFlag, throttle } from '../assets/utils/window-base'
import {
  Weather,
  CloudComponent,
  Music,
  Movie,
  Blog,
  Tools,
  WebControl,
  Friendly,
  menuList,
} from './components/plugin'

export default defineComponent({
  name: 'home',
  components: {
    Weather,
    CloudComponent,
    Music,
    Movie,
    Blog,
    Tools,
    WebControl,
    Friendly,
  },
  setup() {
    let state = reactive({
      showBox: 2,
      img: require('../assets/image/zhigan.png'),
      boxList: menuList,
      animate: {
        in: 'animate__animated animate__fadeInDown',
        out: 'animate__animated animate__fadeOutDown',
      },
    })

    function choice(i: number) {
      if (i === state.showBox) return false

      // style 的 z-index 属性提升到最上面
      state.boxList.forEach((item, idx) => {
        if (idx === i) {
          item.zIndex = 100
        } else {
          item.zIndex = 1
        }
      })

      // 根据判断当前显示的 box 下标和点击的下标进行对比，修改动画方向
      const animateType = 'fade'
      if (i > state.showBox) {
        state.animate.in = `animate__animated animate__${animateType}InUp`
        state.animate.out = `animate__animated animate__${animateType}OutUp`
      } else {
        state.animate.in = `animate__animated animate__${animateType}InDown`
        state.animate.out = `animate__animated animate__${animateType}OutDown`
      }

      state.showBox = i
    }

    const mouseWheelHandler = (event: any) => {
      let i = state.showBox
      if (mouseWheelFlag(event) === 'up') {
        i = i - 1 < 0 ? state.boxList.length - 1 : i - 1
      } else {
        i = i + 1 > state.boxList.length - 1 ? 0 : i + 1
      }
      choice(i)
    }

    onMounted(() => {
      window.addEventListener(
        'mousewheel',
        throttle(mouseWheelHandler, 600),
        true
      )
    })

    return {
      state,
      choice,
    }
  },
})
</script>

<style lang="scss">
.home,
.box {
  height: 100%;
  width: 100%;
  backdrop-filter: blur(4rpx);
}
.home {
  position: relative;
  .box {
    position: absolute;
  }
  .nav {
    position: absolute;
    z-index: 999;
    height: 480px;
    top: 50%;
    margin-top: -240px;
    left: 40px;
    > li {
      position: relative;
      background: $white;
      color: #666;
      height: 40px;
      width: 120px;
      line-height: 40px;
      text-align: center;
      margin: 10px 0px;
      cursor: pointer;
      // 禁止文字选中
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
      &::before {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 50%;
        width: 100%;
        z-index: -1;
        background: rgba(1, 1, 1, 0.2);
        transform-origin: 0 100%;
        transform: skewX(-45deg);
      }
    }
    > li.li-active {
      color: $black;
      background: #f4a9aa;
      font-weight: bold;
    }
  }
}
</style>
